<template>
	<div class="goods">
		<div style="height: 14vw;">
			<van-nav-bar
			  fixed
			  title="商品"
			  left-text="返回"
			  left-arrow
			  @click-left="()=> router.push('/login')"
			/>
		</div>
		<van-list
		  v-model:loading="loading"
		  :finished="finished"
		  finished-text="没有更多了"
		  @load="onLoad"
		>
		  <van-card v-for="item in list" :key="item.id"
		    :price="item.price"
			:origin-price="item.oprice"
		    :desc="item.remark"
		    :title="item.title"
		    :thumb="'http://localhost:8082'+item.pic"
		  >
			<template #title>
				<p class="title">{{item.title}}</p>
				<p class="subtitle">{{item.subTitle}}</p>
			</template>
		    <template #tags>
		      <van-tag plain type="danger" style="margin-right: 5px;">标签</van-tag>
		      <van-tag plain type="danger">标签</van-tag>
		    </template>
		  </van-card>

		</van-list>
	</div>
</template>

<script setup>
	import {useRouter} from 'vue-router'
	import { ref, reactive, getCurrentInstance} from 'vue'
	import axios from 'axios'
	import { findgoods } from '../../api/goods.js'
	const { proxy } = getCurrentInstance()
	const router = useRouter()
	const _this = proxy
	const list = ref([]);
	const loading = ref(false);
	const finished = ref(false);
	const param = reactive({
		pageNum:1,	//pageNum
		pageSize: 10,//每页个数
		keyword:''
	})

	const onLoad = async () => {
	  // 异步更新数据
	  await findgoods(param).then(res=>{
		  // 加载状态结束
		  if(res.code === 200){
			_this.loading = false;
			_this.list = _this.list.concat(res.data.records)
		  }
		  // 数据全部加载完成
		  if (_this.param.pageNum >= res.data.pages) {
			_this.finished= true;
		  }
	  })
	  _this.param.pageNum++
	}
</script>

<style>
	:root{--van-card-background-color:#fff;}
</style>